<template>
  <div class="index-css">
    <div class="left-tree-css scroll-bar">
      <LeftTree></LeftTree>
    </div>
    <div class="konwledge-container width-css">
      <div class="conter-top">
        <div>
          <el-select class="find-select" v-model="modelFindName" filterable clearable placeholder="物模型">
            <el-option v-for="item in modelSelectData" :key="item.label" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-input class="find-input" v-model="knowledgeFindName" placeholder="输入知识代码/名称查找"></el-input>
        </div>
        <div>
          <el-button type="primary" @click="onAddRule()">新增</el-button>
        </div>
      </div>

      <CommonTable
        :options="tableConfig.options"
        :columns="tableConfig.columns"
        :actions="tableConfig.actions"
        :data="tableData"
      ></CommonTable>
      <CommonPagination :options="paginationOptions" :dataSource="getTableData"></CommonPagination>
    </div>
  </div>
</template>

<script>
import LeftTree from './components/KnowledgeTree.vue';
import CommonTable from '../../components/CommonTable.vue';
import CommonPagination from '../../components/CommonPagination.vue';
import { getModelList } from '@/api/knowledgeBaseApi.js';
export default {
  name: 'KnowledgeBase',
  components: {
    LeftTree,
    CommonTable,
    CommonPagination
  },
  data() {
    return {
      modelFindName: '',
      modelSelectData: [],
      knowledgeFindName: '',
      tableMaxHeight: null,
      tableData: [],
      paginationOptions: {
        total: 0,
        currentPage: 1,
        pageSize: 15,
        pageSizes: [15, 30, 50, 100],
        pagerCount: 5,
        isShow: true,
        isDisabled: false
      }
    };
  },
  mounted() {
    this.onModelData();
    this.getTableData();
    this.tableHeightResize();

    // 监听窗口大小变化
    window.onresize = () => {
      this.tableHeightResize();
    };

    // 监听菜单栏的展开收起
    let sidebarEl = document.querySelector('.fold-icon');
    if (sidebarEl) {
      sidebarEl.addEventListener('click', () => {
        this.tableHeightResize();
      });
    }
  },
  computed: {
    tableConfig() {
      return {
        // table - options
        options: {
          // height: 0,
          height: this.tableMaxHeight,
          hasSelection: false,
          hasIndex: true,
          lableIndex: '序号',
          isStripe: true,
          isBorder: false,
          isLoading: false,
          headerRowStyle: ({ row, rowIndex }) => {
            return {};
          },
          headerCellStyle: ({ row, column, rowIndex }) => {
            return { padding: '8px 0' };
          },
          rowStyle: ({ row, rowIndex }) => {
            return {};
          },
          cellStyle: ({ row, column, rowIndex }) => {
            return { padding: '8px 0' };
          }
        },
        // table - columns
        columns: [
          {
            prop: 'name',
            label: '知识代码',
            width: '',
            hasSort: false,
            isShow: true
          },
          {
            prop: 'name',
            label: '知识分类名称',
            width: '',
            hasSort: false,
            isShow: true
          },
          {
            prop: 'name',
            label: '物模型',
            width: '',
            hasSort: false,
            isShow: true
          },
          {
            prop: 'name',
            label: '标题',
            width: '',
            hasSort: false,
            isShow: true
          },
          {
            prop: 'name',
            label: '权限',
            width: '',
            hasSort: false,
            isShow: true
          },
          {
            prop: 'name',
            label: '附件',
            width: '',
            hasSort: false,
            isShow: true
          }
        ],
        // table - actions
        actions: {
          title: '操作',
          width: 160,
          links: [
            {
              label: '编辑',
              type: 'primary',
              handleLinkClick: row => {
                console.log('编辑--', row.id);
              },
              handleLinkShow: row => {
                return true;
              },
              handleLinkDisabled: row => {
                return;
              }
            }
          ]
        }
      };
    }
  },
  methods: {
    // 表格高度处理（示例）- 根据实际开发页面做相关调整即可
    tableHeightResize() {
      // 主内容区高度
      let mainContentEl = document.querySelector('.main');
      let mainContentHeight = mainContentEl ? mainContentEl.getBoundingClientRect().height : 0;

      /*
        表格高度（获取main元素的高度，然后减去其它元素的高度）
        18：页面标题
        76：操作栏
        51：表头
        72：页码
      */
      this.tableMaxHeight = mainContentHeight - 18 - 76 - 51 - 72;

      // 主内容区宽度
      let winInnerWidth = window.innerWidth;

      // 菜单栏宽度
      let sidebarWidth = document.querySelector('.sidebar-container').getBoundingClientRect().width;

      // 主内容区宽度
      let tableWidth = winInnerWidth - sidebarWidth - 30 - 300 - 40;
      tableWidth = tableWidth < 690 ? 690 : tableWidth;

      // // 表格宽度
      let tableEl = document.querySelector('.el-table');
      tableEl.style.width = tableWidth + 'px';
    },
    //物模型数据
    onModelData() {
      let params = {};
      params.id = 0;
      params.name = '';
      getModelList(params).then(res => {
        res.data.map(item => {
          item.value = item.id;
          item.label = item.name;
          this.modelSelectData.push(item);
        });
      });
    },
    getknowledgeTableData() {
      // this.tableHeightResize();
      // this.params.page = this.tablePagination.options.currentPage;
      // this.params.page_size = this.tablePagination.options.pageSize;
      // getScadaList(this.params).then(res => {
      //   this.scadaTableData = res.data.list || [];
      //   this.tablePagination.options.total = res.data.total;
      // });
    },
    // 获取表格数据
    getTableData() {
      let params = {
        pageIndex: this.paginationOptions.currentPage, //当前页
        pageSize: this.paginationOptions.pageSize //每页显示数据条数
      };

      let res = {
        data: {
          list: [],
          total: 33
        },
        status: 200,
        message: 'ok'
      };
      for (let i = 1; i <= 16; i++) {
        let obj = {
          id: i,
          name: '张三' + i,
          age: 10 + i,
          gender: i % 2 === 0 ? 0 : 1
        };

        res.data.list.push(obj);
      }

      this.tableData = res.data.list;
      this.paginationOptions.total = 23;
    }
  }
};
</script>

<style lang="scss" scoped>
.index-css {
  display: flex;
  width: 100%;
}
.width-css {
  width: 100%;
}
.left-tree-css {
  width: 320px;
  border-right: 1px solid #ebeef5;
  min-height: 806px;
  max-height: 806px;
  overflow-y: auto;
}
.konwledge-container {
  padding: 20px 20px 0;
}
.conter-top {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.find-select {
  width: 200px;
  margin-right: 10px;
}
.find-input {
  width: 300px;
}
::v-deep .el-table {
  &::before {
    height: 0;
  }

  th,
  td {
    padding: 8px 0;
  }
}

::v-deep .el-table__body {
  width: 100% !important;
}
</style>
